<template>
	<fui-bottom-popup v-bind="$attrs" @close="closePopup">
		<view class="fui-custom__wrap p-30">
			<view class="flex-between mb-25">
				<view class="text-32">{{ info.lable }}</view>
				<uni-icons type="closeempty" color="rgba(144,147,153,.8)" @tap="closePopup" />
			</view>
			
			<view class="py-20 ml-20 border-bottom flex-between" v-for="item, index in info.list" :key="index" @tap.prevent="categoryClick(index)">
				<text :class="['text-30 tip', { 'text-primary': item.checked }]">{{ item.name }}</text>
				<uv-image :src="`${imgPath}svgs/select.svg`" width="24rpx" height="18rpx" v-if="item.checked" />
			</view>
			
			<fui-button text="确定" :margin="['60rpx', '0', '0']" @click="onConfirm" />
		</view>
	</fui-bottom-popup>
</template>

<script setup>
	
	import { ref, computed } from 'vue'
	import { imgPath } from '@/common/config'
	
	let data = ref([
		{ lable: '是否在上或者上过补习班', list: [{ name: '曾经补习' }, { name: '正在补习' }, { name: '从未补习' }]},
		{ lable: '对学习英语有无兴趣', list: [{ name: '有' }, { name: '无' }, { name: '一般' }]},
		{ lable: '试课渠道', list: [{ name: '招生信息' }, { name: '朋友推荐' }, { name: '学生转介绍' }, { name: '其他' }]}
	])
	
	let props = defineProps({
		type: {
			type: [String, Number],
			default: 0
		}
	})
	
	let { user } = uni.$store()
	
	let info = computed(() => {
		let { extraStudy, learningInterest, source } = user.userInfo
		data.value[props.type].list.map(item => { item.checked = false })
		data.value[props.type].list.map((item, index) => {
			if (props.type == 0 && extraStudy?.value && extraStudy?.value - 1 == index) item.checked = true
			if (props.type == 1 && learningInterest?.value && learningInterest?.value - 1 == index) item.checked = true
			if (props.type == 2 && source?.value && source?.value - 1 == index) item.checked = true
		})
		return data.value[props.type]
	})
	
	let emits = defineEmits(['update:show'])
	
	function categoryClick(index) {
		info.value.list.map((item, i) => { if (i != index) item.checked = false })
		info.value.list[index].checked = !info.value.list[index].checked
	}
	
	let closePopup = () => emits('update:show', false)
	
	function onConfirm() {
		let item = {}
		for (let i = 0; i < info.value.list.length; i++) {
			if (info.value.list[i].checked) {
				item = { ...info.value.list[i], value: i + 1 }
				break
			}
		}
		
		switch(parseInt(props.type)) {
			case 0:
			user.userInfo.extraStudy = { ...item }
			break;
			
			case 1:
			user.userInfo.learningInterest = { ...item }
			break;
			
			case 2:
			user.userInfo.source = { ...item }
			break;
		}
		
		closePopup()
	}
	
</script>

<style scoped lang="scss">
	.tip{color: #333}
	.text-primary{color: $primary !important}
</style>